<template>
	<page-frame page-name="约教练">
		<template #sticky>
			<u-search height="72rpx" placeholder="搜索教练" :showAction="false" bgColor="#ffffff"
				v-model="page.params.keyWord" @search="search" @clear="clear" @custom="search"></u-search>
			<view class="u-m-t-32">
				<div class="u-flex u-flex-around">
					<block v-for="sort in sortList" :key="sort.code">
						<view class="search-tag" :class="{ 'active': page.params.orderBy == sort.code }"
							@click="sortClick(sort)">
							<view >{{ sort.name }}</view>
							<image v-if="sort.code != 'id'" class="u-m-l-8" :src="sort.desc ? '/static/icons/desc.png':'/static/icons/asc.png' " style="width: 16px;height: auto;" mode="widthFix" />
						</view>
					</block>
				</div>
				<!-- <up-scroll-list :indicator="false">
					 <tag-btn name="全部" :active="!page.params.stadiumId" @search="tagClick({id: ''})" />
					<block v-for="stadium in page.stadium" :key="stadium.id">
						<tag-btn :name="stadium.name" :active="stadium.id === page.params.stadiumId"
							@search="tagClick(stadium)" />
					</block> 
				</up-scroll-list> -->
			</view>
		</template>
		<template #area>
			<block v-if="page.list.length>0"  v-for="coach in page.list" :key="coach.id">
				<coach-card :coach="coach" />
			</block>
			<EmptyData v-else text="暂无教练"></EmptyData>
		</template>
	</page-frame>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import CoachCard from '@/components/CoachCard.vue';
	import PageFrame from '@/components/PageFrame.vue';
	import EmptyData from '@/components/EmptyData.vue'
	import TagBtn from '@/components/TagBtn.vue';
	import {
		onShareAppMessage,
		onShareTimeline
	} from "@dcloudio/uni-app"
	import {
		coachList
	} from '@/api/coach.js';
	import {
		stadiumList
	} from '@/api/stadium.js';
	const keyword = ref('')
	const page = ref({
		list: [],
		stadium: [], // 场馆列表，用于筛选教练
		params: {
			stadiumId: '',
			orderBy: 'id',
			sort: 'desc'
		},
	})
	const sortList = ref([{
			name: '综合推荐',
			code: 'id'
		},
		{
			name: '技术等级',
			code: 'grade',
			desc: true
		},
		{
			name: '课时费用',
			code: 'price',
			desc: true
		},
	])

	const stadiumData = () => {
		stadiumList().then(resp => {
			page.value.stadium = resp.data
		})
	}

	const search = () => {
		page.value.params.keyword = keyword.value
		coachList(page.value.params).then(resp => {
			page.value.list = resp.data.map(c => {
				return {
					...c,
					labelList: c.label ? c.label.split(',') : []
				}
			})
		})
	}

	const sortClick = (e) => {
		page.value.params.orderBy = e.code
		if(e.code == 'id'){
			page.value.params.sort = 'desc'
			search()
			return
		}
		page.value.params.sort = e.desc ? 'desc' : 'asc'
		e.desc = !e.desc
		search()
	}

	const tagClick = ({
		id
	}) => {
		page.value.params.stadiumId = id
		search()
	}


	search()
	stadiumData()

	onShareAppMessage(() => {
		return {
			title: '德宝乒乓球-' + '约教练',
		}
	})
	onShareTimeline(() => {
		return {
			title: '德宝乒乓球-' + '约教练',
		}
	})
</script>



<style lang="scss">
	page{
		background-color: #fff !important;
	}
	.search-tag {
		min-width: max-content;
		display: flex;
		align-items: center;
		font-size: 32rpx;
		color: #666666;
		padding: 0 16rpx;
	}

	.active {
		font-weight: bolder;
		color: #333333;
	}
</style>